<template>
    <div class="page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                ref="form"
                :rules="rules">
                <el-form-item label="教师名称" prop="name">
                    <el-input v-model.trim="form.name" placeholder="请输入教师名称" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-input v-model.trim="form.account" placeholder="请输入账号" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="密码" :required="!id">
                    <el-input
                        type="password"
                        v-model.trim="form.password"
                        placeholder="请输入密码"
                        class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :required="!id">
                    <el-input
                        type="password"
                        v-model.trim="form.confirm"
                        placeholder="请确认密码"
                        class="input-width"></el-input>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button type="primary" @click="onSave">保 存</el-button>
                <el-button @click="onBack">返 回</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            id: '',
            form: {
                account: '',
                password: '',
                confirm: '',
                name: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入教师名称', trigger: 'blur' },
                ],
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                const form = this.form;
                if (!this.id && !form.password) return $ele.$message.warning('请输入密码');
                if (form.password !== form.confirm) return $ele.$message.warning('两次密码不一致');
                const method = this.id ? 'put' : 'post';
                API[method]('course-teacher', form).then(() => {
                    $ele.$message.success(`${this.id ? '编辑' : '新增'}成功`);
                    this.onBack();
                });
            });
        },

        onBack() {
            this.$router.back();
        },
    },
    mounted() {
        this.id = this.$route.params.id;
        if (this.id) {
            const form = sessionStorage.getItem(`TeacherAccount${this.id}`);
            if (form) this.form = JSON.parse(form);
        }
    },
};
</script>

<style lang="scss" scoped>
.input-width {
    max-width: 300px;
    width: 100%;
}
</style>
